<template>
  <div class="album" v-if="props.recommendAlbum != []">
    <div class="album-item" v-for="item in props.recommendAlbum" :key="item.userId">
      <img class="album-img" :src="item.picUrl" alt="" />
      <p class="album-title">{{ item.name }}</p>
      <p class="album-text">{{ item.trackCount }}首单曲</p>
    </div>
  </div>
  <div class="album" v-if="props.Sublist != []">
    <div class="album-item" v-for="item in props.Sublist" :key="item.picId">
      <img class="album-img" :src="item.picUrl" alt="" />
      <p class="album-title">{{ item.name }}</p>
      <p class="album-text">{{ item.albumSize }}张专辑|{{ item.mvSize }}张MV</p>
    </div>
  </div>
  <div class="album">
    <div class="album-item" v-for="item in props.NewAlbum" :key="item.picId">
      <img class="album-img" :src="item.picUrl" alt="" />
      <p class="album-title">{{ item.name }}</p>
      <p class="album-text">{{ item.artist.name }}</p>
      <p class="album-text">
        发行时间：{{ dayjs(item.publishTime).format("YYYY-MM-DD") }}
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import dayjs from "dayjs";
export default defineComponent({
  name: "SongImg",
});
</script>
<script lang="ts" setup>
const props = defineProps({
  NewAlbum: {
    type: Array,
    default: [],
  },
  recommendAlbum: {
    type: Array,
    default: [],
  },
  Sublist: {
    type: Array,
    default: [],
  },
});
// const list=computed({
//   get(){
//     return props.NewAlbum.
//   },
//   set(){}
// })
</script>
<style scoped>
/* 专辑 */
.album {
  width: 880px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.album-item {
  width: 180px;
  height: 240px;
  margin: 0 30px 50px 0;
}
.album-img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
.album-title {
  font-size: 16px;
  color: #333;
  margin-top: 15px;
}
.album-text {
  color: #909399;
  font-size: 14px;
}
</style>
